<template>
    <div id="detail_goods_list" v-if="Object.keys(message).length !== 0">
        <div v-for="(item,index) in message" :key="index" class="list_img">
            <img :src="item.image" alt="" @load="imgLoad">
        </div>
    </div>
</template>

<script>
    export default {
        name: "DetailGoodsList",
        props:{
            message:Array
        },
        data(){
          return{
              counter:0,
          }
        },
        methods:{
            imgLoad(){
                if (this.counter === 1){
                    this.$emit('list_imgLoad')
                }
                this.counter += 1
            }
        }
    }
</script>

<style scoped>
    #detail_goods_list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-around ;
        margin-top: 20px;
    }
    #detail_goods_list h3{
        margin-bottom: 20px;
        font-style: italic;
        font-weight: bolder;
        color: lightcoral;
        text-align: center;
    }
    h4 {}
    .list_img{
        width: 48%;
    }
    img{
        width: 100%;
        border-radius: 5px;
    }
</style>